<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card style="height:800px">
        <Card>
            <Form action="" method="get" name="exportList" id="exportList" enctype="multipart/form-data">
                <header>
                    <span>日期：</span>
                    <DatePicker v-model="collectCondition.startDate" type="date" style="width: 150px" name="startDate" :options="startDateOptions" @on-change="startDateChange"></DatePicker>
                    <span>- </span>
                    <DatePicker v-model="collectCondition.endDate" type="date" placement="bottom-end" style="width: 150px" name="endDate" :options="endDateOptions" @on-change="endDateChange"></DatePicker>
                    <span style="width: 200px;margin-left: 20px;">业务产品：</span>
                    <Select v-model="collectCondition.productTypeName" class="v-select-wrapper" style="width:150px" name="productTypeName">
                        <Option v-for="item in productList" :value="item.productType" :key="item.productType">{{ item.productTypeName }}</Option>
                    </Select>
                    <span style="width: 200px;margin-left: 20px;">类型:</span>
                    <Select v-model="collectCondition.status" class="v-select-wrapper" style="width:150px" name="status">
                        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label}}</Option>
                    </Select>
                    </div>
                    <Button type="primary" @click="listQuery" style="margin-left: 20px;">查询</Button>
                    <Button type="primary" @click="excelDown" style="margin-left: 20px;">下载</Button>
                </header>
                <input type="hidden" name="pageNo" id="pageNo" value="" />
                <input type="hidden" name="pageSize" id="pageSize" value="" />
            </Form>
        </Card>
        <div>
            <Table border :columns="orderColumns" :data="orderData" style="width: 100%;"></Table>
        </div>
        <div style="text-align: center;margin-top: 36px;">
            <Page :total="collectCondition.total" :current="collectCondition.pageNo" :page-size="collectCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
        </div>
    </Card>
</template>

<script>
import collectionDealCompent from '../collection-manage/collection-deal-compent.vue'
export default {
  name: 'mutative-router',
  components: {
    collectionDealCompent
  },
  data () {
    return {
      collectTaskParams: {
        loanId: '',
        custCardNo: '',
        overdueCode: ''
      },
      collectCondition: {
        startDate: '',
        endDate: '',
        productTypeName: '',
        status: '',
        pageNo: 1,
        pageSize: 10,
        total: 0
      },

      path: this.$route.path,
      orderColumns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '日期',
          key: 'outPutDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.outPutDate))
            ])
          }
        },
        {
          title: '业务品种',
          key: 'productTypeName',
          align: 'center'
        },
        {
          title: '渠道',
          key: 'channel',
          align: 'center'
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  this.collectTaskParams.loanId = params.row.caseId
                  this.collectTaskParams.overdueCode = params.row.overdueCode
                  this.collectTaskParams.custCardNo = params.row.custCardNo
                  this.$router.push({name: 'collection-deal-compent', query: this.collectTaskParams})// 类似post传参
                  // var data={"loanId":params.row.caseId,"custCardNo":params.row.custCardNo,"overdueCode":params.row.overdueCode};
                  // this.$router.push({name:'collection-deal-compent',params:data});//类似post传参
                  // console.info(data)
                }
              }
            }, params.row.custName)
          }
        },
        {
          title: '客户身份证号码',
          key: 'custCardNo',
          align: 'center'
        },
        {
          title: '当前还款期数',
          key: 'currTermNo',
          align: 'center'
        },
        {
          title: '第一次入催时间',
          key: 'firstReaminderDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.firstReaminderDate))
            ])
          }
        },
        {
          title: '应还款日期',
          key: 'paymentDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.paymentDate))
            ])
          }
        },
        {
          title: '实际还款日期',
          key: 'actPaymentDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.actPaymentDate))
            ])
          }
        },
        {
          title: '还款方式',
          key: 'payType',
          align: 'center',
          render: (h, params) => {
            if (params.row.payType === '1') {
              return h('div', [
                h('span', '自动代扣')
              ])
            } else if (params.row.payType === '2') {
              return h('div', [
                h('span', '当期还款')
              ])
            } else if (params.row.payType === '3') {
              return h('div', [
                h('span', '提前结清')
              ])
            } else if (params.row.payType === '4') {
              return h('div', [
                h('span', '主动还款')
              ])
            } else if (params.row.payType === '5') {
              return h('div', [
                h('span', '下期还款')
              ])
            } else if (params.row.payType === '6') {
              return h('div', [
                h('span', '手动代扣')
              ])
            } else if (params.row.payType === '9') {
              return h('div', [
                h('span', '支付宝还款')
              ])
            } else if (params.row.payType === '10') {
              return h('div', [
                h('span', '支付宝提前结清')
              ])
            }
          }
        }
      ],
      orderData: [],
      productList: [],
      typeList: [
        {
          label: '请选择',
          value: ''
        },
        {
          label: '全部逾期',
          value: '0'
        },
        {
          label: '部分逾期',
          value: '1'
        }
      ],
      startDateOptions: {
        disabledDate: date => {
          return date && date.valueOf() > Date.now()
        }
      },
      endDateOptions: {
        disabledDate: date => {
          let beginTime = this.collectCondition.startDate ? new Date(this.collectCondition.startDate).valueOf() : Date.now()
          return date && ((this.collectCondition.startDate && date.valueOf() < beginTime) || (date.valueOf() > Date.now()))
        }
      }
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.renderProductList()
    var vm = this
    var startDate = new Date(Date.now() - 24 * 60 * 60 * 1000)
    vm.collectCondition.startDate = startDate
  },

  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.collectCondition.pageNo = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.collectCondition.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      vm.collectTaskParams.loanId = ''
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/collection/checkListQuery/service/selectUrgentList', vm.collectCondition).then(re => {
        var data = re.data
        vm.orderData = data.data.list
        vm.collectCondition.total = data.data.total
      }).catch(er => {

      })
    },
    excelDown () {
      document.getElementById('exportList').action = this.$appContext.marvels_core_financial + 'financial/collection/checkListQuery/service/downLoadUrgentExcel'
      document.getElementById('pageNo').value = this.collectCondition.pageNo
      document.getElementById('pageSize').value = this.collectCondition.pageSize
      document.getElementById('exportList').submit()
    },
    startDateChange: function (e) {
      this.collectCondition.startDate = e
      let endTime = this.collectCondition.endDate ? new Date(this.collectCondition.endDate).valueOf() : Date.now()
      this.startDateOptions = {
        disabledDate (date) {
          return date && date.valueOf() > endTime
        }
      }
    },
    endDateChange: function (e) {
      this.collectCondition.endDate = e
      let endTime = this.collectCondition.endDate ? new Date(this.collectCondition.endDate).valueOf() : Date.now()
      this.startDateOptions = {
        disabledDate (date) {
          return date && date.valueOf() > endTime
        }
      }
    },
    renderProductList: function () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/collection/checkListQuery/service/findConditionList').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        if (data.data.productList && data.data.productList.length > 0) {
          var obj = {
            productType: '',
            productTypeName: '请选择'
          }
          vm.productList.push(obj)
          $.each(data.data.productList, function (index, item) {
            vm.productList.push(item)
          })
        }
      }).catch(er => {

      })
    }
  }
}
</script>
